/*
 * @Author: songliusheng
 * @Date: 2018-11-12 10:24:03
 * @Description: ''
 * @Last Modified by: zoushiyong
 * @Last Modified time: 2018-11-23 18:19:30
 * @ToDo: ''
 */

import React from 'react'
import { actions, connect } from 'mirrorx'
import { Button, Radio, Modal } from 'antd'
import api from '../../api'
import IconDom from '../../component/IconDom'
import Panel from './component/Panel'
import CouponList from './component/CouponList'
import './index.scss'

class Coupon extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      qrcode: '',
      currentPage: 1,
      pageSize: 10,
      rowTotal: 0,
      accountData: null, // 当前渠道的优惠券账户信息
      rows: [] // 优惠券列表
    }
    this.handleStatusChange = this.handleStatusChange.bind(this)
    this.setQrcode = this.setQrcode.bind(this)
    this.pageChange = this.pageChange.bind(this)
  }
  componentDidMount () {
    // 分页查询优惠码批次
    this.queryGoodsPromoBatchPage()
    // 获取当前渠道余额账户信息
    this.getPartnerAccount()
  }
  getPartnerAccount () {
    T.ajax({
      url: api.getPartnerAccount.path,
      data: {
        partnerId: true // 这个parterId在node端添加的
      }
    }).then(res => {
      if (res.code === 0) {
        this.setState({
          accountData: res.data
        })
      }
    })
  }
  // 优惠券列表
  queryGoodsPromoBatchPage (status) {
    let { currentPage, pageSize } = this.state
    T.ajax({
      url: api.queryGoodsPromoBatchPage.path,
      loading: true,
      data: {
        pageIndex: currentPage,
        pageSize,
        condition: {
          partnerId: true,
          goodsPromoBatchStatus: status
        }
      }
    }).then(res => {
      if (res.code === 0) {
        let data = res.data
        if (data) {
          let { rows, rowTotal } = data
          this.setState({
            rows,
            rowTotal
          })
        }
      }
    })
  }
  pageChange (currentPage) {
    this.setState({ currentPage: currentPage.current }, () => {
      this.queryGoodsPromoBatchPage()
    })
  }

  handleStatusChange (e) {
    let value = e.target.value
    this.queryGoodsPromoBatchPage(value)
  }
  setQrcode (qrcode) {
    this.setState({ qrcode })
  }

  render () {
    let statusArr = [
      { name: 'All', status: 1 },
      { name: 'Ready', status: 2 },
      { name: 'In Progress', status: 3 },
      { name: 'End', status: 4 }
    ]
    let { qrcode, rowTotal, rows, accountData } = this.state
    let { partnerId } = this.props.mainModel.userInfo
    let { menuModel } = this.props
    console.log('menuModel', menuModel)
    let menuAuth = false
    if (menuModel && menuModel.grantedMenus) {
      menuAuth = T.getMenuAuth('Marketing', menuModel.grantedMenus)
    }
    console.log('market menuAuth', menuAuth)
    console.log('partnerId--->>>', partnerId)
    return <div>
      <div className='coupon'>

        {/* 显示金额的面板 */}
        <Panel accountData={accountData} />

        {/* 筛选框 */}
        <div className='mt30 filter'>
          <Button
            disabled={!menuAuth}
            onClick={() => {
              actions.routing.push({ pathname: '/page-coupon-create' })
            }}
            type='primary'>
            <IconDom className='mr10' code='icon-zengjia' />
            <span className='f14'>Create Promo Code</span>
          </Button>
          <div className='filter-tab'>

            {/* 渲染选择面板 */}
            <Radio.Group
              defaultValue={1}
              onChange={this.handleStatusChange}>
              {
                statusArr && statusArr.map(item => {
                  return <Radio.Button
                    key={item.status}
                    value={item.status}>
                    {item.name}
                  </Radio.Button>
                })
              }
            </Radio.Group>
          </div>
        </div>
        <div className='list'>

          {/* 优惠券列表 */}
          <CouponList
            menuAuth={menuAuth}
            qrcode={qrcode}
            rows={rows}
            partnerId={partnerId}
            pageChange={this.pageChange}
            rowTotal={rowTotal}
            setQrcode={this.setQrcode} />
        </div>
      </div>
    </div>
  }
}

export default connect(state => {
  return state
})(Coupon)
